﻿<!DOCTYPE HTML>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8" />
<title>maxen-demo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="copyright" content="" />
<meta name="author" content="@mruse|616574130@qq.com" />
<script type="text/javascript">
/*
	命名： 
		方法,变量 相关用驼峰
		id，class 名称相关用下划线
1. 表单管理: 名称，类型，
2. 设置管理: 是否启用，是否必填，是否显示
3. 生成代码: 
*/
var $ = function (id){
	return typeof(id) == 'string' ? document.getElementById(id) : id ;
}, mruse = {
	author : '@mruse',
	email : '616574130@qq.com',
	ltrim : function (str) {
		var regExp = /^\s+/g;
		return str.replace(regExp, '');
	},
	rtrim : function (str) {
		var regExp = /\s+$/g;
		return str.replace(regExp, '');
	},
	trim : function (str) {
		return this.ltrim(this.rtrim(str));
	},
	isEmpty : function (str) {
		var regExp = /^\s+$/;
		return regExp.test(this.trim(str)) || str == '';
	},
	isInt : function (str) {
		var regExp = /^\d+$/;
		return regExp.test(this.trim(str));
	},
	isMobile : function (str) {
		var regExp = /^\+{0,1}(86){0,1}-{0,1}\d{11}$/;
		return regExp.test(this.trim(str));
	},
	isEmail : function (str) {
		var regExp = /^[a-z0-9_\-]+(\.[_a-z0-9\-]+)*@([_a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel)$/;
		return regExp.test(this.trim(str));
	},
	isEnglish : function () {
		var regExp = /^\w+$/;
		return regExp.test(this.trim(str));
	},
	isChinese : function (str) {
		var regExp = /[\u4e00-\u9fa5]{1,}/g;
		return regExp.test(this.trim(str));
	},
	show : function () {
		var txt = '';
		for (k in this) {
			txt += 'mruse.' + k + '(str) or str.mruse("' + k + '")' + "\n";
		}
		txt += '\u611F\u8C22\u4F7F\u7528 mruse.js, \u6709\u95EE\u9898\u8BF7\u8054\u7CFB teachmyself@qq.com \u6C9F\u901A\u4EA4\u6D41!';
		return txt;
	},
};
String.prototype.mruse = function (fn) {
	var v = this.valueOf(),
	f = fn.toString();
	return mruse[f](v);
};
function bind(obj, ev, fun){

};

var maxen = {
	mInput : {
		'name' : '',
		'alias' : '',
		'have' : '',
		'need' : '',
		'show' : '',
	},
	mCheck : {
		'name' : ['isEmpty','isChinese'],
		'alias' : ['isEmpty','isEnglish'],
	},
	checkAll : function (pre){
		var o = {};
		for (v in maxen.mInput){
			if ($(pre+v).type == 'checkbox') {
				o[v] = $(pre+v).value;
				$(pre+v).checked = true;
			};
		};
	},
	cancelAll : function(pre) {
		console.log(this);
		var o = {};
		for (v in maxen.mInput){
			o[v] = $(pre+v).value;
			$(pre+v).checked = false;
		};
	},
	createInput : function(pre){
		var o = {};
		for (v in maxen.mInput){
			if ($(pre+v).type == "text" && mruse.isEmpty($(pre+v).value)) {
				alert('"'+$(pre+v).title+'"\u4e0d\u80fd\u4e3a\u7a7a\uff01'); 
				return;
			};
			o[v] = $(pre+v).value = mruse.trim($(pre+v).value);
		};
		console.log(o);
		/*
		var template = '<label for="form_'+alias+'">'+name+': </label><input type="text" id="form_'+alias+'" name="'+alias+'" />';
		var element = document.createElement('p');
			element.innerHTML = template;
			$('show-area').appendChild(element);
			$('tablelist').insertBefore(element, $('btn_box'));
		*/
	},
};

window.onload = function(){
	$('createInput').onclick = function(){
		maxen.createInput('maxen_name_');
	};
};
</script>
<style type="text/css">
/* CSS-reset Create By MrUse|teachmyself@163.com */
body{margin:0; padding:0; font-size:12px; font-family:'微软雅黑','宋体','Arial Narrow','Arial'; line-height:22px; background:#fff;}
div,span,p,ul,ol,li,dl,dt,dd,table,tr,th,td{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
a:link{text-decoration:none;}
a:hover{cursor:pointer;}
ul,ol{list-style:none;}
img{border:none;}

table{border-collapse:collapse} /*
table tr:hover{background:#ddd;} */
table tr th{background:#eee;}
table tr th,table tr td{border:#999 solid 1px; padding:10px; text-align:center;}

/* CSS-common */
.w-960{width:960px; margin:0 auto;}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.top10{margin-top:10px;}
.top20{margin-top:20px;}
.left10{margin-left:10px;}
.btn{cursor:pointer;}

/* CSS-page */
.wrap{height:auto; color:#333}

.set-area{height:auto;}

.show-area{height:auto;}

.tips{width:100%; height:100%; background:#000; /*position:absolute;*/ top:0; left:0; filter:alpha(opacity=60); opacity:0.6;}
.tips .txt{}
</style>
</head>

<body>

<div class="wrap w-960 top20">
	<div class="set-area w-960 top20">
		<form name="create_input" id="create_input" method="" action="" >
		<!--
			<label for="form_name">&#39033;&#30446;&#21517;&#31216;&#65306;</label>
			<input type="input" name="form[name]" id="form_name" /><br />
			<label for="form_alias">&#33521;&#25991;&#21517;&#31216;&#65306;</label>
			<input type="input" name="form[alias]" id="form_alias" /><br />
			
			&#34920;&#21333;&#31867;&#22411;&#65306;
			<input type="radio" name="form[type]" class="btn" id="form_type_input" value="input" checked="checked" /><label for="form_type_input" class="btn">&#36755;&#20837;&#26694;</label>
			<input type="radio" name="form[type]" class="btn" id="form_type_radio" value="input" /><label for="form_type_radio" class="btn">&#21333;&#36873;&#38062;</label>
			<input type="radio" name="form[type]" class="btn" id="form_type_checkbox" value="checkbox" /><label for="form_type_checkbox" class="btn">&#22797;&#36873;&#26694;</label>
			<input type="radio" name="form[type]" class="btn" id="form_type_select" value="select" /><label for="form_type_select" class="btn">&#19979;&#25289;&#21015;&#34920;</label>
			<br />
			
			
			<input type="button" name="createInput" class="btn" id="createInput" value="&#21019;&#24314;" />
			-->
			<table summary="" cellpadding="0" cellspacing="0" id="tablelist">
				<tr>
					<th>项目名称</th>
					<th>英文别名</th>
					<th>是否启用</th>
					<th>是否必填</th>
					<th>是否显示</th>
					<th>全选/取消</th>
				</tr>
				<tr>
					<input type="checkbox" name="test" value="1" />
					<td><input type="input" name="maxen[name][name]" title="项目名称" id="maxen_name_name" /></td>
					<td><input type="input" name="maxen[name][alias]" title="英文别名" id="maxen_name_alias" /></td>
					<td><input type="checkbox" name="maxen[name][have]" value="1" title="是否启用" id="maxen_name_have" /></td>
					<td><input type="checkbox" name="maxen[name][need]" value="1" title="是否必填" id="maxen_name_need" /></td>
					<td><input type="checkbox" name="maxen[name][show]" value="1" title="是否显示" id="maxen_name_show" /></td>
					<td>
						<input type="button" name="" class="btn" title="点击全选" value="全选" onclick="maxen.checkAll('maxen_name_')" />
						<input type="button" name="" class="btn" title="点击取消" value="取消" onclick="maxen.cancelAll('maxen_name_')" />
					</td>
				</tr>
				<tr id="btn_box">
					<td colspan="6">
						<input type="button" class="btn" value="创建表单" id="createInput" />
						<input type="reset" class="btn" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</div><!--// .set-area|End -->
	
	<div id="show-area" class="show-area w-960 top20">
	</div><!--// .show-area|End -->
</div>

<div class="tips" id="tips"></div>
</body>
</html>